<template>
  <div class="article-page" v-loading="loading">
    <div class="content-layout">
      <main class="article-main">
        <!-- 文章头部 -->
        <header class="article-header">
          <div class="header-meta">
            <div class="category-tag">
              <i class="fas fa-folder"></i>
              {{ article.category.name }}
            </div>
            <time class="publish-time">
              发布于 {{ article.createTime }}
            </time>
          </div>
          <h1 class="article-title">{{ article.title }}</h1>
          <div class="article-meta">
            <div class="meta-item">
              <i class="far fa-eye"></i>
              <span>{{ article.quantity }} 阅读</span>
            </div>
            <div class="meta-divider"></div>
            <div class="meta-item">
              <i class="far fa-clock"></i>
              <span>大约 <strong>{{ readTime }}</strong> 分钟阅读时长</span>
            </div>
            <div class="meta-divider"></div>
            <div class="meta-item">
              <i class="far fa-comment"></i>
              <span>{{ article.commentNum || 0 }} 评论</span>
            </div>
          </div>
        </header>

        <!-- 文章内容 -->
        <article class="article-content" v-html="article.content"></article>

        <!-- 添加打赏组件 -->
        <Reward />

        <!-- 文章底部 -->
        <footer class="article-footer">
          <!-- 版权信息 -->
          <div class="copyright-info">
            <div class="copyright-header">
              <i class="fas fa-copyright"></i>
              <span>版权声明</span>
            </div>
            <div class="copyright-content">
              <p>
                本文由 <strong>{{ article.authorName }}</strong> 创作，采用 
                <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">
                  知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
                </a>
                进行许可。
              </p>
              <p>
                转载请注明出处：
                <a :href="currentUrl" target="_blank">{{ currentUrl }}</a>
              </p>
            </div>
          </div>

          <!-- 标签部分保持不变 -->
          <div class="tags-section">
            <i class="fas fa-tags"></i>
            <div class="tags-list">
              <router-link 
                v-for="tag in article.tags" 
                :key="tag.id"
                :to="`/tags?tagId=${tag.id}&tagName=${tag.name}`"
                class="tag-item"
              >
                {{ tag.name }}
              </router-link>
            </div>
          </div>

          <!-- 修改操作按钮部分 -->
          <div class="article-actions">
            <button class="action-btn like" :class="{ active: article.isLike }" @click="toggleLike">
              <i class="fas fa-heart"></i>
              <span>{{ article.likeNum }}</span>
            </button>
            <div class="share-dropdown" v-click-outside="closeShareMenu">
              <button class="action-btn share" @click="toggleShareMenu">
                <i class="fas fa-share-alt"></i>
                分享
              </button>
              <div class="share-menu" v-show="showShareMenu">
                <button class="share-item" @click="shareToQQ">
                  <i class="fab fa-qq"></i>
                  QQ好友
                </button>
                <button class="share-item" @click="shareToQzone">
                  <i class="fas fa-star"></i>
                  QQ空间
                </button>
                <button class="share-item" @click="shareToWeibo">
                  <i class="fab fa-weibo"></i>
                  微博
                </button>
                <button class="share-item" @click="shareToWechat">
                  <i class="fab fa-weixin"></i>
                  微信
                </button>
                <button class="share-item" @click="copyLink">
                  <i class="fas fa-link"></i>
                  复制链接
                </button>
              </div>
            </div>
          </div>

          <!-- 导航部分保持不变 -->
          <!-- <nav class="article-nav">
            <div 
              v-if="prevArticle" 
              class="nav-item prev"
              @click="goToArticle(prevArticle.id)"
            >
              <i class="fas fa-arrow-left"></i>
              <div class="nav-content">
                <span class="label">上一篇</span>
                <span class="title">{{ prevArticle.title }}</span>
              </div>
            </div>
            <div 
              v-if="nextArticle" 
              class="nav-item next"
              @click="goToArticle(nextArticle.id)"
            >
              <div class="nav-content">
                <span class="label">下一篇</span>
                <span class="title">{{ nextArticle.title }}</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
          </nav> -->
        </footer>

        <!-- 添加评论组件 -->
        <Comment 
          :article-id="$route.params.id" 
          :comment-count="article.commentNum || 0" 
          :article-author-id="article.userId || ''" 
        />
      </main>

      <!-- 侧边栏 -->
      <aside class="article-sidebar desktop-only">
        <div class="toc-container">
          <div class="toc-header">
            <i class="fas fa-list"></i>
            <span>目录</span>
            <div class="progress-bar" :style="{ width: readProgress + '%' }"></div>
          </div>
          <div class="toc-content">
            <div 
              v-for="(item, index) in tocItems" 
              :key="index"
              class="toc-item"
              :class="{ 
                'active': activeHeading === item.id,
                [`level-${item.level}`]: true 
              }"
              @click="scrollToHeading(item.id)"
            >
              {{ item.text }}
            </div>
          </div>
        </div>
      </aside>
    </div>
    <mj-image-preview ref="imagePreview" />
  </div>
</template>

<script>
import { getArticleDetailApi, likeArticleApi } from '@/api/article'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Comment from '@/components/Comment/index.vue'
import Reward from '@/components/Reward/index.vue'

export default {
  name: 'Article',
  components: {
    Comment,
    Reward
  },
  data() {
    return {
      article: {
        category: {}
      },
      prevArticle: {
        id:1,
        title: '默认文章',
      },
      nextArticle: {
        id:1,
        title: '默认文章',
      },
      tocItems: [],
      readProgress: 0,
      showShareMenu: false,
      activeHeading: '',
      readTime: 0,
      likeDebounce: false,
      loading:false
    }
  },
  computed: {
    currentUrl() {
      return window.location.href
    }
  },
  methods: {
    /**
     * 添加行号
     */
    addLineNumbers() {
      const codeBlocks = document.querySelectorAll('.article-content pre code')
      codeBlocks.forEach(code => {
        // 检查是否已添加行号
        if (code.parentElement.querySelector('.line-numbers')) return
        
        const lines = code.textContent.split('\n').length
        const lineNumbers = document.createElement('div')
        lineNumbers.className = 'line-numbers'
        
        for (let i = 1; i <= lines; i++) {
          const span = document.createElement('span')
          span.textContent = i
          lineNumbers.appendChild(span)
        }
        
        code.parentElement.insertBefore(lineNumbers, code)
      })
    },
    /**
     * 获取文章详情
     */
    async getArticle() {
      this.loading = true
      hljs.configure({
        // 忽略未经转义的 HTML 字符
        ignoreUnescapedHTML: true
      })
      try {
        const res = await getArticleDetailApi(this.$route.params.id)
        this.article = {
          ...res.data,
          content: res.data.content || ''
        }
        
        // 高亮代码并添加复制按钮和行号
        this.$nextTick(() => {
          this.generateToc()
          document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block)
          })
          // 等待高亮完成后添加复制按钮、行号和图片预览
          setTimeout(() => {
            this.addCopyButtons()
            this.addLineNumbers()
            this.initImagePreview()
          }, 100)
          
          // 计算阅读时间 - 使用 content 而不是 contentMd
          const textContent = this.article.content.replace(/<[^>]+>/g, ' ')
          this.readTime = Math.ceil(textContent.split(/\s+/).length / 300)
        })
      } catch (error) {
        this.$message.error('获取文章详情失败')
      } finally{
        this.loading = false
      }
    },
    /**
     * 生成目录
     */
    generateToc() {
      const headings = document.querySelectorAll('.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6')
      this.tocItems = Array.from(headings).map(heading => {
        const id = heading.textContent.trim().toLowerCase().replace(/\s+/g, '-')
        heading.id = id
        return {
          id,
          text: heading.textContent,
          level: parseInt(heading.tagName.charAt(1))
        }
      })
    },
    /**
     * 点赞
     */
    toggleLike() {
       //防止频繁点击 设置一个5秒的防抖
       if(this.likeDebounce) {
        this.$message.warning('请于 5 秒后再试')
        return
       }
      // 实现点赞功能
      likeArticleApi(this.$route.params.id).then(res => {
        if(this.article.isLike) {
          this.article.likeNum--
        } else {
          this.article.likeNum++
        }
        this.$message.success(this.article.isLike ? '取消点赞成功' : '点赞成功')
        this.article.isLike = !this.article.isLike
        // 设置一个5秒的防抖
        this.likeDebounce = true
        setTimeout(() => {
         this.likeDebounce = false
       }, 5000)
      })
    },
    /**
     * 分享
     */
    toggleShareMenu() {
      this.showShareMenu = !this.showShareMenu
    },  
    /**
     * 关闭分享
     */
    closeShareMenu() {
      this.showShareMenu = false
    },
    /**
     * 分享到QQ
     */
    shareToQQ() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(this.article.title)
      const summary = encodeURIComponent(this.article.summary || '')
      const pic = encodeURIComponent(this.article.avatar || '')
      window.open(
        `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${summary}&pics=${pic}`, 
        "renren-share", "width=490,height=700");
      this.closeShareMenu()
    },
    /**
     * 分享到QQ空间
     */
    shareToQzone() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(this.article.title)
      const summary = encodeURIComponent(this.article.summary || '')
      const pic = encodeURIComponent(this.article.avatar || '')
      window.open(
        `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&summary=${summary}&pics=${pic}`,
        "renren-share", "width=490,height=700"
      )

      this.closeShareMenu()
    },
    /**
     * 分享到微博
     */
    shareToWeibo() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(`${this.article.title} - 拾壹博客`)
      window.open(
        `http://service.weibo.com/share/share.php?url=${url}&title=${title}`,
        "renren-share", "width=490,height=700")
      this.closeShareMenu()
    },
    /**
     * 分享到微信
     */
    shareToWechat() {
      // 由于微信分享需要使用微信SDK，这样简单处理
      window.open(
        `https://api.pwmqr.com/qrcode/create/?url=${window.location.href}`,
         "renren-share", "width=490,height=700");
      this.closeShareMenu()
    },
    /**
     * 复制链接
     */
    async copyLink() {
      try {
        await navigator.clipboard.writeText(this.currentUrl)
        this.$message.success('链接已复制到剪贴板')
      } catch (err) {
        this.$message.error('复制失败，请手动复制')
      }
      this.closeShareMenu()
    },
    /**
     * 跳转到文章
     */
    goToArticle(id) {
      this.$router.push(`/article/${id}`)
    },
    /**
     * 更新阅读进度
     */
    handleScroll() {
      const docEl = document.documentElement
      const winHeight = window.innerHeight
      const docHeight = docEl.scrollHeight - winHeight
      const scrollTop = window.scrollY || docEl.scrollTop
      this.readProgress = Math.round((scrollTop / docHeight) * 100)
    },
    /**
     * 滚动到标题
     */
    scrollToHeading(id) {
      const element = document.getElementById(id)
      if (element) {
        const header = document.querySelector('.site-header')
        const headerHeight = header ? header.offsetHeight : 0
        const targetPosition = element.offsetTop - headerHeight - 20

        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        })
      }
    },
    /**
     * 更新激活标题
     */
    updateActiveHeading() {
      this.handleScroll()
      const headings = this.tocItems.map(item => document.getElementById(item.id))
      const header = document.querySelector('.site-header')
      const headerHeight = header ? header.offsetHeight : 0
      
      for (let i = headings.length - 1; i >= 0; i--) {
        const heading = headings[i]
        if (heading && heading.getBoundingClientRect().top <= headerHeight + 100) {
          this.activeHeading = heading.id
          break
        }
      }
    },
    /**
     * 添加复制按钮
     */
    addCopyButtons() {
      const codeBlocks = document.querySelectorAll('.article-content pre')
      if (!codeBlocks.length) return

      codeBlocks.forEach(pre => {
        // 检查是否已经添加过复制按钮
        if (pre.querySelector('.code-header')) return

        // 创建复制按钮容器
        const buttonWrapper = document.createElement('div')
        buttonWrapper.className = 'code-header'
        
        // 创建复制按钮
        const copyButton = document.createElement('button')
        copyButton.className = 'copy-button'
        copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制'
        copyButton.title = '复制代码'
        
        // 添加点击事件
        copyButton.addEventListener('click', async () => {
          try {
            const code = pre.querySelector('code')
            await navigator.clipboard.writeText(code.textContent)
            copyButton.innerHTML = '<i class="fas fa-check"></i> 已复制'
            copyButton.classList.add('copied')
            setTimeout(() => {
              copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制'
              copyButton.classList.remove('copied')
            }, 2000)
            this.$message.success('复制成功')
          } catch (err) {
            this.$message.error('复制失败，请手动复制')
          }
        })
        
        // 将按钮添加到代码块
        buttonWrapper.appendChild(copyButton)
        pre.appendChild(buttonWrapper)
      })
    },
    /**
     * 初始化图片预览
     */
    initImagePreview() {
      const images = document.querySelectorAll('.article-content img')
      images.forEach(img => {
        // 移除旧的事件监听器（如果有的话）
        img.removeEventListener('click', this.handleImageClick)
        // 添加新的事件监听器
        img.addEventListener('click', this.handleImageClick)
      })
    },
    /**
     * 处理图片点击
     */
    handleImageClick(e) {
      const img = e.target
      if (img.tagName === 'IMG') {
        this.$refs.imagePreview.show(img.src)
      }
    }
  },
  async created() {
    await this.getArticle()
  },
  mounted() {
    window.addEventListener('scroll', this.updateActiveHeading)
    this.$nextTick(() => {
      this.initImagePreview()
    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateActiveHeading)
    // 清理图片点击事件监听器
    const images = document.querySelectorAll('.article-content img')
    images.forEach(img => {
      img.removeEventListener('click', this.handleImageClick)
    })
  },
  watch: {
    // 监听路由参数变化
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        // 重新获取文章数据
        this.getArticleData() // 假设这是获取文章数据的方法
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.article-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: $spacing-lg;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: $spacing-md * 2;
  
  @include responsive(lg) {
    grid-template-columns: 1fr;
    gap: $spacing-lg;
    padding: 0;
  }
}

.article-main {
  background: var(--card-bg);
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
  overflow: hidden;
}

.article-header {
  padding: $spacing-xl * 2;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  
  .header-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $spacing-lg;
    margin-bottom: $spacing-lg;

    .publish-time {
      color: var(--text-secondary);
      font-size: 0.9em;
    }

  }


  .category-tag {
    display: inline-flex;
    align-items: center;
    gap: $spacing-xs;
    padding: $spacing-sm $spacing-lg;
    background: rgba($primary, 0.1);
    color: $primary;
    border-radius: 20px;
    font-size: 0.9em;
    
    i {
      font-size: 0.9em;
    }
  }
  .article-title {
    color: var(--text-primary);
  }

  .article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $spacing-lg;
    color: var(--text-secondary);
    margin-top: $spacing-xl;

    .meta-item {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      font-size: 0.95em;

      i {
        color: $primary;
      }
      strong {
        color: $primary;
      }
    }

    .meta-divider {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-secondary);
      opacity: 0.5;
    }
  }
}

.article-content {
  padding: $spacing-md * 2;
  line-height: 1.8;
  color: var(--text-primary);
  font-size: 1.1em;
  
  :deep(h2) {
    font-size: 1.8em;
    margin: $spacing-xl 0 $spacing-lg;
    padding-bottom: $spacing-sm;
    border-bottom: 2px solid rgba($primary, 0.1);
    position: relative;
    color: var(--text-primary);

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 50px;
      height: 2px;
      background: $primary;
    }
  }

  :deep(h3) {
    font-size: 1.4em;
    margin: $spacing-lg 0;
    color: var(--text-primary);
    position: relative;
    padding-left: $spacing-lg;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: $primary;
      border-radius: $border-radius-sm;
    }
  }

  :deep(p) {
    margin: $spacing-md 0;
    color: var(--text-secondary);
    line-height: 1.8;
  }

  :deep(a) {
    color: $primary;
    text-decoration: none;
    border-bottom: 1px dashed $primary;
    transition: all 0.3s ease;

    &:hover {
      color: var(--primary-dark);
      border-bottom-style: solid;
    }
  }

  :deep(blockquote) {
    margin: $spacing-lg 0;
    padding: $spacing-md $spacing-lg;
    background: var(--hover-bg);
    border-left: 4px solid $primary;
    border-radius: $border-radius-sm;
    color: var(--text-secondary);
    font-style: italic;

    p {
      margin: 0;
    }
  }

  :deep(ul), :deep(ol) {
    margin: $spacing-md 0;
    padding-left: $spacing-xl;
    color: var(--text-secondary);

    li {
      margin-bottom: $spacing-sm;
      position: relative;

      &::marker {
        color: $primary;
      }
    }
  }

  :deep(pre) {
    margin: 1em 0;
    position: relative;
    background: #282c34;
    border-radius: 6px;
    padding-top: 2.5em; /* 为按钮留出空间 */
    overflow: hidden; /* 添加此行确保内容不会溢出 */
    
    /* 添加行号容器样式 */
    .line-numbers {
      position: absolute;
      left: 0;
      top: 2.5em;
      bottom: 0;
      font-size: 14px;
      padding: 1em 0;
      text-align: right;
      color: #666;
      border-right: 1px solid #404040;
      background: #2d323b;
      user-select: none;
      z-index: 1; /* 确保行号在代码之上 */
      
      span {
        display: block;
        padding: 0 0.5em;
        min-width: 2.5em; /* 增加宽度 */
        line-height: 1.5;
      }
    }

    /* 调整代码内容的样式 */
    code {
      display: block;
      padding: 1em;
      padding-left: 4em; /* 增加左侧padding */
      margin-left: 0; /* 移除margin */
      overflow-x: auto;
      font-family: 'Fira Code', monospace;
      font-size: 14px;
      line-height: 1.5;
      position: relative; /* 添加相对定位 */
      
      /* 添加水平滚动条样式 */
      &::-webkit-scrollbar {
        height: 8px;
      }
      
      &::-webkit-scrollbar-track {
        background: #2d323b;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #454c59;
        border-radius: 4px;
        
        &:hover {
          background: #5a6273;
        }
      }
    }

    /* 添加仿 macOS 风格的按钮 */
    &::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 12px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff5f56;
      box-shadow: 
        20px 0 0 #ffbd2e,
        40px 0 0 #27c93f;
    }

    /* 复制按钮容器 */
    .code-header {
      position: absolute;
      top: 8px;
      right: 12px;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    /* 显示复制按钮 */
    &:hover .code-header {
      opacity: 1;
    }

    /* 复制按钮样式 */
    .copy-button {
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 4px;
      color: #abb2bf;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 4px;

      i {
        font-size: 14px;
      }
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
      }
      
      &.copied {
        background: #98c379;
        color: #fff;
      }
    }
  }

  :deep(img) {
    max-width: 100%;
    border-radius: $border-radius-md;
    margin: $spacing-lg 0;
    transition: all 0.3s ease;
    box-shadow: $shadow-md;
    cursor: zoom-in;

    &:hover {
      transform: translateY(-2px);
      box-shadow: $shadow-lg;
    }
  }

  :deep(table) {
    width: 100%;
    margin: $spacing-lg 0;
    border-collapse: collapse;
    border-radius: $border-radius-md;
    overflow: hidden;
    
    th, td {
      padding: $spacing-sm $spacing-md;
      border: 1px solid var(--border-color);
    }

    th {
      background: var(--hover-bg);
      color: var(--text-primary);
      font-weight: 500;
      text-align: left;
    }

    tr:nth-child(even) {
      background: var(--hover-bg);
    }
  }

  :deep(hr) {
    margin: $spacing-xl 0;
    border: none;
    height: 1px;
    background: var(--border-color);
    position: relative;

    &::before {
      content: '§';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: var(--card-bg);
      padding: 0 $spacing-lg;
      color: var(--text-secondary);
      font-size: 1.2em;
    }
  }
}

.article-footer {
  padding: $spacing-md * 2;
  border-top: 1px solid var(--border-color);

  .copyright-info {
    margin-bottom: $spacing-xl;
    background: var(--hover-bg);
    border-radius: $border-radius-lg;
    overflow: hidden;

    .copyright-header {
      padding: $spacing-md $spacing-lg;
      background: rgba($primary, 0.1);
      color: $primary;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;
    }

    .copyright-content {
      padding: $spacing-lg;
      color: var(--text-secondary);
      font-size: 0.95em;
      line-height: 1.6;

      p {
        margin: $spacing-sm 0;

        &:last-child {
          margin-bottom: 0;
        }
      }

      strong {
        color: var(--text-primary);
        font-weight: 500;
      }

      a {
        color: $primary;
        text-decoration: none;
        border-bottom: 1px dashed $primary;
        transition: all 0.3s ease;

        &:hover {
          border-bottom-style: solid;
        }
      }
    }
  }

  .tags-section {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;

    i {
      color: $primary;
    }

    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
    }

    .tag-item {
      padding: $spacing-xs $spacing-md;
      background: var(--hover-bg);
      color: var(--text-secondary);
      border-radius: $border-radius-lg;
      font-size: 0.9em;
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        background: $primary;
        color: white;
        transform: translateY(-2px);
      }
    }
  }

  .article-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-lg;
    margin-bottom: $spacing-xl;

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: $spacing-sm;
      padding: $spacing-sm $spacing-xl;
      border: none;
      border-radius: 20px;
      font-size: 1em;
      cursor: pointer;
      transition: all 0.3s ease;

      &.like {
        background: var(--hover-bg);
        color: var(--text-secondary);

        &.active {
          background: $primary;
          color: white;
        }

        &:hover {
          transform: scale(1.05);
        }
      }

      &.share {
        background: $primary;
        color: white;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba($primary, 0.2);
        }
      }
    }

    :deep(.share-dropdown) {
      position: relative;

      .share-menu {
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        background: var(--card-bg);
        border-radius: $border-radius-lg;
        box-shadow: $shadow-lg;
        padding: $spacing-xs;
        min-width:180px;
        z-index: 100;
        border: 1px solid var(--border-color);
        transform-origin: bottom right;
        animation: shareMenuIn 0.2s ease;

        &::before {
          content: '';
          position: absolute;
          bottom: -5px;
          right: 20px;
          width: 10px;
          height: 10px;
          background: var(--card-bg);
          border-left: 1px solid var(--border-color);
          border-top: 1px solid var(--border-color);
          transform: rotate(225deg);
        }

        .share-item {
          width: 100%;
          padding: $spacing-sm $spacing-lg;
          border: none;
          background: none;
          color: var(--text-secondary);
          font-size: 0.95em;
          display: flex;
          align-items: center;
          gap: $spacing-md;
          cursor: pointer;
          transition: all 0.3s ease;
          border-radius: $border-radius-sm;

          i {
            width: 16px;
            text-align: center;
            font-size: 1.1em;

            &.fa-qq {
              color: #12B7F5;
            }
            &.fa-star {
              color: #FFD700;
            }
            &.fa-weibo {
              color: #E6162D;
            }
            &.fa-weixin {
              color: #07C160;
            }
            &.fa-link {
              color: $primary;
            }
          }

          &:hover {
            background: var(--hover-bg);
            padding-left: $spacing-xl;
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }

  .article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-lg;
    margin-top: $spacing-xl;

    .nav-item {
      display: flex;
      align-items: center;
      gap: $spacing-md;
      padding: $spacing-lg;
      background: var(--hover-bg);
      border-radius: $border-radius-lg;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: rgba($primary, 0.1);
        transform: translateY(-2px);
      }

      &.next {
        text-align: right;
      }

      .nav-content {
        flex: 1;
        min-width: 0;

        .label {
          display: block;
          color: var(--text-secondary);
          font-size: 0.9em;
          margin-bottom: $spacing-xs;
        }

        .title {
          color: var(--text-primary);
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      i {
        color: $primary;
      }
    }
  }
}

.article-sidebar {
  .toc-container {
    position: sticky;
    top: 90px;
    background: var(--card-bg);
    border-radius: $border-radius-lg;
    box-shadow: $shadow-md;
    overflow: hidden;

    .toc-header {
      padding: $spacing-lg;
      background: var(--hover-bg);
      color: var(--text-primary);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      i {
        color: $primary;
      }

      .progress-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: $primary;
        transition: width 0.3s ease;
      }
    }

    .toc-content {
      padding: $spacing-lg;
      max-height: calc(100vh - 200px);
      overflow-y: auto;

      /* 自定义滚动条 */
      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba($primary, 0.2);
        border-radius: 4px;
      }

      .toc-item {
        padding: 6px 12px;
        margin: 4px 0;
        cursor: pointer;
        border-radius: 6px;
        color: var(--text-secondary);
        transition: all 0.2s ease;
        font-size: 14px;
        line-height: 1.5;

        &:hover {
          color: $primary;
          background: var(--hover-bg);
        }

        &.active {
          color: $primary;
          background: var(--hover-bg);
          font-weight: 500;
        }

        &.level-1 { padding-left: 12px; }
        &.level-2 { padding-left: 24px; }
        &.level-3 { padding-left: 36px; }
        &.level-4 { padding-left: 48px; }
        &.level-5 { padding-left: 60px; }
        &.level-6 { padding-left: 72px; }
      }
    }
  }

  .share-dropdown {
    position: relative;

    .share-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--card-bg);
      border-radius: $border-radius-lg;
      box-shadow: $shadow-lg;
      padding: $spacing-xs;
      min-width: 140px;
      z-index: 100;
      border: 1px solid var(--border-color);
      transform-origin: top right;
      animation: shareMenuIn 0.2s ease;

      &::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 20px;
        width: 10px;
        height: 10px;
        background: var(--card-bg);
        border-left: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
        transform: rotate(45deg);
      }

      .share-item {
        width: 100%;
        padding: $spacing-sm $spacing-lg;
        border: none;
        background: none;
        color: var(--text-secondary);
        font-size: 0.95em;
        display: flex;
        align-items: center;
        gap: $spacing-md;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: $border-radius-sm;

        i {
          width: 16px;
          text-align: center;
          font-size: 1.1em;

          &.fa-qq {
            color: #12B7F5;
          }
          &.fa-weibo {
            color: #E6162D;
          }
          &.fa-weixin {
            color: #07C160;
          }
          &.fa-link {
            color: $primary;
          }
        }

        &:hover {
          background: var(--hover-bg);
          padding-left: $spacing-xl;
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}

@include responsive(md) {
  .article-page {
    padding: $spacing-md;
  }

  .article-header {
    padding: $spacing-lg;

    .article-title {
      font-size: 1.8em;
    }

    .header-meta {
      flex-direction: column;
      gap: $spacing-sm;
    }

    .article-meta {
      flex-wrap: wrap;
      justify-content: center;
      gap: $spacing-md;

      .meta-divider {
        display: none;
      }
    }
  }

  .article-content {
    padding: $spacing-lg;
    font-size: 1em;
  }

  .article-footer {
    padding: $spacing-lg;

    .article-nav {
      grid-template-columns: 1fr;
      gap: $spacing-md;
    }

    .copyright-info {
      margin: $spacing-lg 0;
    }

    .tags-section {
      flex-direction: column;
      align-items: flex-start;
      gap: $spacing-sm;

      .tags-list {
        width: 100%;
      }
    }

    .article-actions {
      flex-direction: column;
      gap: $spacing-md;

      .action-btn {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

@keyframes shareMenuIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.desktop-only {
  @include responsive(lg) {
    display: none;
  }
}
</style> 